<template>
	<div>
		<div>
			<el-input
				style="width: 300px; margin-right: 10px; margin-left: -500px;"
				clearable
				@clear="initstaff"
				v-model="name"
				@keydown.enter.native="initstaff"
			    placeholder="请输入姓名进行搜索"
			    prefix-icon="el-icon-search">
			</el-input>
			<el-button type="primary" @click="initstaff">搜索</el-button>
			<el-button type="primary" @click="showstaffAdd">添加</el-button>
		</div>
		<div>
			<el-table
			    :data="staffData"
			    stripe
				border
			    style="width: 100%">
			   <el-table-column label="工号"
			    width="80" 
			    prop="staffId">
			    </el-table-column>
			   <el-table-column
			     label="姓名"
			     prop="name"
			   >
			   </el-table-column>
			   				
			   <el-table-column
			     label="性别"
			     prop="sex"
			   >
			   </el-table-column>
			   <el-table-column
			     label="年龄"
			     prop="age"
			   >
			   </el-table-column>
			   <el-table-column
			     label="入职时间"
			     prop="hiredate"
			   >
			   </el-table-column>
			   <el-table-column
			     label="手机号"
			     prop="telphone"
			   >
			   </el-table-column>
			   <el-table-column
			     label="简介"
			     prop="content"
			   >
			   </el-table-column>
			   <el-table-column
			     label="备注"
			     prop="remarks"
			   >
			   </el-table-column>
			   
			   <el-table-column
			     label="用户名"
			     prop="username"
			   >
			   </el-table-column>
			   <el-table-column
			     label="密码"
			     prop="password"
			   >
			   </el-table-column>
			   				
			   <el-table-column
			     label="人员状态"
			    prop="status"
			   					
			   >
			   </el-table-column>
				<el-table-column
				  label="操作"
				  align="center"
				  width="200">
				<template slot-scope="scope">
					 <el-button @click="showStaffEdit(scope.row)">编辑</el-button>
					  <el-button @click="deletePlan(scope.row)" type="danger">删除</el-button>
				  </template>
				</el-table-column>
			  </el-table>
			 <el-pagination
			   background
			   @current-change="currentChange"
			   layout="prev, pager, next,jumper,->,total"
			   :total=total>
			 </el-pagination>
		 </div>
		 <el-dialog title="用户添加" :visible.sync="dialogVisible">
		  	<StaffAdd  :dialogVisible.sync=dialogVisible @add="initstaff()"></StaffAdd>
		  </el-dialog>
		 
		<el-dialog title="用户编辑" :visible.sync="editVisible">
		 	<StaffEdit :editVisible.sync="editVisible" :formData="formData"></StaffEdit>
		 </el-dialog>
		  
	</div> 
</template>

<script>
	import StaffAdd from './staff_add.vue'
	import StaffEdit from './staff_edit.vue'
	export default{
		name:"StaffList",
		components:{
			StaffAdd,
			StaffEdit
		},
		
		data(){
			return{
				staffData:[],
				total:0,
				currentPage:1,
				size:10,
				name:'',
				dialogVisible:false,
				editVisible:false,
				formData:{
					staffId:'',
					name:'',
					sex:'',
					age:'',
					hiredate:'',
					telphone:'',
					content:'',
					remarks:'',
					username:'',
					status:'',
					password:''
				}
			}
		},
		mounted(){
			this.initstaff();
			
		},
		methods:{
			
			currentChange(currentPage){
				this.currentPage=currentPage;
				this.initstaff();
			},
			showStaffEdit(data){
				this.editVisible=true;
				this.formData=data;
			},
			showstaffAdd(){
				this.dialogVisible=true;
			},
			deletePlan(data){
				this.$confirm('此操作将永久删除'+data.staffId+'该用户，是否继续？','提示',{
					confirmButtonText:'确定',
					cancelButtonText:'取消',
					type:'warning'
				}).then(() => {
					this.getRequest('/staff/delete?staffId='+data.staffId).then(resp =>{
						if(resp){
							this.initstaff();
						}
					})
				}).catch(() => {
					this.$message({
						type:'info',
						message:'已取消删除'
					});
				});
			},
			
			initstaff(){
				this.getRequest('/staff/stafflist?currentPage='+this.currentPage+'&size='+this.size+'&name='+this.name).then(resp=>{
					if(resp){
						this.staffData=resp.data;
						this.total=resp.total;
					}
				})
			}
		}
	}
</script>

<style>
</style>
